import 'package:lepig/common/config/theme.dart';
import 'package:lepig/model/ProductInfoModel.dart';
import 'package:lepig/model/ProductModel.dart';
import 'package:lepig/request/HttpSelectProductDetails.dart';
import 'package:lepig/request/HttpSelectRelated.dart';
import 'package:lepig/util/DashedRect.dart';
import 'package:lepig/util/ShopType.dart';
import 'package:lepig/widget/GoodsHorizontalMore.dart';
import 'package:flui/flui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

// ignore: must_be_immutable
class Product extends StatefulWidget {
  Product(this.productModel);

  ProductModel productModel;

  @override
  _productState createState() => _productState();
}

//最大滚动距离
const APPBAR_SCROLL_OFFSET = 150;

// ignore: camel_case_types
class _productState extends State<Product> with SingleTickerProviderStateMixin {
  FLToastDefaults _toastDefaults = FLToastDefaults();
  ScrollController _controller = new ScrollController();
  ProductModel productModel;
  ProductInfoModel productInfoModel;
  List<ProductModel> relatedProduct = [];

  // bar 显示
  double appBarAlpha = 0;

  //返回按钮
  double appBarBackAlpha = 1;

  @override
  // ignore: must_call_super
  void initState() {
    super.initState();
    productModel = widget.productModel;
    _listener();
    getProductInfo();
  }

  //商品详情
  getProductInfo() {
    HttpSelectProductDetails(this.context,
            type: productModel.type, productId: productModel.productId)
        .then((value) {
      setState(() {
        productInfoModel = value;
      });
      getRelatedProduct();
    });
  }

  //相关商品
  getRelatedProduct() {
    RelatedParams relatedParams = new RelatedParams();
    relatedParams.type = productModel.type;
    relatedParams.relatedVal = productInfoModel.relatedVal;
    relatedParams.productId = productInfoModel.productId;
    HttpSelectRelated(this.context, params: relatedParams).then((value) {
      setState(() {
        relatedProduct = value;
      });
    });
  }

  //监听滚动事件，打印滚动位置
  _listener() {
    _controller.addListener(() {
      double alpha = _controller.offset / APPBAR_SCROLL_OFFSET;
      double backAlpha = 1 - alpha;
      setState(() {
        appBarAlpha = compoteAlpha(alpha);
        appBarBackAlpha = compoteAlpha(backAlpha);
      });
    });
  }

  //计算透明度
  double compoteAlpha(alpha) {
    if (alpha < 0) {
      alpha = 0.0;
    } else if (alpha > 1) {
      alpha = 1.0;
    }
    return alpha;
  }

  @override
  void dispose() {
    //为了避免内存泄露，需要调用_controller.dispose
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      body: FLToastProvider(
          defaults: _toastDefaults,
          child: new Container(
              height: MediaQuery.of(context).size.height,
              color: Colors.white,
              child: productInfoModel != null
                  ? new Stack(
                      children: <Widget>[
                        //列表
                        SingleChildScrollView(
                          padding: EdgeInsets.only(bottom: 70.0),
                          child: Center(
                            child: Column(
                              children: <Widget>[
                                _banner(),
                                _priceTile(),
                                _coupon(),
                                _prompt(),
                                new Container(
                                  color: Color.fromRGBO(247, 247, 247, 1),
                                  height: 10.0,
                                ),
                                _shopInfo(),
                                new Container(
                                  color: Color.fromRGBO(247, 247, 247, 1),
                                  height: 10.0,
                                ),
                                _recommend(),
                                new Container(
                                  color: Color.fromRGBO(247, 247, 247, 1),
                                  height: 10.0,
                                ),
                                _productInfo(),
                                new Container(
                                  color: Color.fromRGBO(247, 247, 247, 1),
                                  height: 10.0,
                                ),
                              ],
                            ),
                          ),
                          controller: _controller,
                        ),
                        //导航栏
                        new Positioned(
                          child: Opacity(
                            opacity: appBarAlpha,
                            child: new Container(
                              padding: EdgeInsets.only(
                                  top: MediaQuery.of(context).padding.top),
                              height: 80.0,
                              width: MediaQuery.of(context).size.width,
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  border: Border(
                                      bottom: BorderSide(
                                          width: 1,
                                          color: Color.fromRGBO(
                                              216, 216, 216, 0.4)))),
                              child: new Flex(
                                direction: Axis.horizontal,
                                children: <Widget>[
                                  new Expanded(
                                    flex: 1,
                                    child: new Container(
                                      alignment: Alignment.center,
                                      child: new Text(
                                        "商品详情",
                                        style: TextStyle(fontSize: 18.0),
                                      ),
                                    ),
                                  ),
                                  new Expanded(
                                    flex: 1,
                                    child: new Container(),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          top: 0,
                          left: 0,
                        ),
                        //返回
                        new Positioned(
                          child: new Opacity(
                            opacity: 1,
                            child: new Container(
                              height: MediaQuery.of(context).padding.top + 80.0,
                              width: 100.0,
                              alignment: Alignment.centerLeft,
                              child: new Container(
                                margin: EdgeInsets.only(left: 10.0),
                                width: 40.0,
                                height: 40.0,
                                decoration: BoxDecoration(
                                    color: (this.appBarBackAlpha <= 0.5)
                                        ? Colors.transparent
                                        : Color.fromRGBO(117, 117, 117, 0.5),
                                    borderRadius: BorderRadius.circular(40.0)),
                                child: new IconButton(
                                  onPressed: () {
                                    Navigator.of(context).pop();
                                  },
                                  icon: new Icon(
                                    Icons.arrow_back,
                                    color: (this.appBarBackAlpha <= 0)
                                        ? Colors.black
                                        : Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                        new Positioned(
                          bottom: 0,
                          child: _bottomBuy(),
                        )
                      ],
                    )
                  : new SizedBox())),
    );
  }

//banner
  Widget _banner() {
    List<String> banners = [];
    if (productInfoModel.thums == null) {
      banners = [];
    } else {
      banners = productInfoModel.thums;
    }
    return Container(
      color: Colors.black,
      height: 400,
      margin: EdgeInsets.only(top: 0.0),
      child: banners.length == 0
          ? SizedBox()
          : new Swiper(
              itemBuilder: (BuildContext context, int index) {
                return ClipRRect(
                    //剪裁为圆角矩形
                    borderRadius: BorderRadius.circular(5.0),
                    child: Image.network(
                      banners[index],
                      fit: BoxFit.cover,
                    ));
              },
              pagination: SwiperPagination(),
              itemCount: banners.length,
            ),
    );
  }

//标题 价格
  Widget _priceTile() {
    return new Padding(
      padding: EdgeInsets.all(10.0),
      child: new Column(
        children: <Widget>[
          new Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              new Expanded(
                flex: 2,
                child: new Row(
                  children: <Widget>[
                    new Text(
                      "￥",
                      style: TextStyle(
                        color: Color.fromRGBO(255, 73, 72, 1),
                        fontSize: 18.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    new Text(
                      double.parse(productInfoModel.finalPrice)
                          .toStringAsFixed(2),
                      style: TextStyle(
                        color: Color.fromRGBO(255, 73, 72, 1),
                        fontSize: 25.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    new Container(
                      width: 10.0,
                    ),
                    new Text(
                      "原价￥" +
                          double.parse(productInfoModel.originalPrice)
                              .toStringAsFixed(2),
                      style: TextStyle(
                        color: Color.fromRGBO(92, 92, 92, 1),
                        fontSize: 15.0,
                        decoration: TextDecoration.lineThrough,
                      ),
                    ),
                  ],
                ),
              ),
              new Expanded(
                flex: 1,
                child: new Row(
                  textDirection: TextDirection.rtl,
                  children: <Widget>[
                    new Text(
                      "人购买",
                    ),
                    new Text(
                      productInfoModel.sale == null ? 0 : productInfoModel.sale,
                      style: TextStyle(
                          color: Color.fromRGBO(255, 73, 72, 1),
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Container(
            child: Text(
              productInfoModel.title,
              maxLines: 5,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400),
            ),
          ),
          new SizedBox(
            height: 10.0,
          ),
          productInfoModel.desc != "null"
              ? new Text(
                  productInfoModel.desc,
                  style: TextStyle(
                    color: curFontBgColor,
                  ),
                )
              : new SizedBox()
        ],
      ),
    );
  }

//优惠券
  Widget _coupon() {
    bool showCoupon = double.parse(productInfoModel.couponPrice) > 0;
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: new Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          new Container(
            alignment: Alignment.center,
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Text(
                      "￥",
                      style: TextStyle(
                          color: Color.fromRGBO(255, 253, 223, 1),
                          fontSize: 15.0),
                    ),
                    new Text(
                      "2.19",
                      style: TextStyle(
                          color: Color.fromRGBO(255, 253, 223, 1),
                          fontSize: 25.0),
                    ),
                  ],
                ),
                new Text(
                  "下单立即赚",
                  style: TextStyle(
                    color: Color.fromRGBO(255, 223, 182, 1),
                    fontSize: 15.0,
                  ),
                ),
              ],
            ),
            width: 120.0,
            height: 80.0,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                gradient: LinearGradient(
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                    colors: [
                      Color.fromRGBO(255, 132, 16, 1),
                      Color.fromRGBO(255, 97, 52, 1),
                    ])),
          ),
          new Expanded(
            flex: 1,
            child: new Container(
              height: 80.0,
              margin: EdgeInsets.only(left: 10.0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        Color.fromRGBO(255, 132, 16, 1),
                        Color.fromRGBO(255, 97, 52, 1),
                      ])),
              child: new Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: new Container(
                        height: 80.0,
                        padding: EdgeInsets.only(left: 10.0),
                        alignment: Alignment.center,
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            new Row(
                              children: <Widget>[
                                new Text("￥",
                                    style: TextStyle(
                                        color: Color.fromRGBO(255, 253, 223, 1),
                                        fontSize: 15.0)),
                                new Text(productInfoModel.couponPrice,
                                    style: TextStyle(
                                        color: Color.fromRGBO(255, 253, 223, 1),
                                        fontSize: 25.0)),
                                new Text(" 优惠券",
                                    style: TextStyle(
                                        color: Color.fromRGBO(255, 253, 223, 1),
                                        fontSize: 15.0)),
                              ],
                            ),
                            new Container(
                              padding: EdgeInsets.only(left: 5.0),
                              alignment: Alignment.centerLeft,
                              child: new Text(
                                  showCoupon
                                      ? (productInfoModel.couponStartTime +
                                          " - " +
                                          productInfoModel.couponEndTime)
                                      : "暂无优惠券",
                                  style: TextStyle(
                                      color: Color.fromRGBO(255, 223, 182, 1),
                                      fontSize: 12.0)),
                            )
                          ],
                        ),
                      )),
                  new Container(
                    height: 80.0,
                    child: DashedRect(
                        color: Colors.white, strokeWidth: 1.5, gap: 3.0),
                  ),
                  new Container(
                    alignment: Alignment.center,
                    width: 80.0,
                    padding: EdgeInsets.only(left: 20.0, right: 20.0),
                    child: new Text("立即领券",
                        style: TextStyle(
                          color: Color.fromRGBO(255, 223, 182, 1),
                          fontSize: 20.0,
                        )),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

//提示
  Widget _prompt() {
    return new Padding(
      padding: EdgeInsets.only(left: 10, right: 10, bottom: 0, top: 0),
      child: new Row(
        children: <Widget>[
          new Icon(
            Icons.wb_incandescent,
            size: 13.0,
          ),
          new Text(
            "未获得返佣金额？",
            style: TextStyle(fontSize: 13.0),
          ),
          new FlatButton(
              onPressed: () {
                _promptBottomSheet(context);
              },
              child: new Text("查看详情 >",
                  style: TextStyle(
                      color: Color.fromRGBO(240, 79, 66, 1), fontSize: 14.0))),
        ],
      ),
    );
  }

//提示弹窗
  Future _promptBottomSheet(context) {
    showFLBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return FLCupertinoActionSheet(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    '1：返现说明，金额未到账八八八八八八八八',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16),
                  ),
                  Text(
                    '2：返现说明，金额未到账八八八八八八八八',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16),
                  )
                ],
              ),
            ),
            cancelButton: CupertinoActionSheetAction(
              child: const Text('立即购买'),
              isDefaultAction: true,
              onPressed: () {
                Navigator.pop(context, '立即购买');
              },
            ),
          );
        }).then((value) {
      //todo
    });
  }

//店铺

  Widget _shopInfo() {
    return new Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      child: new Column(
        children: <Widget>[
          new SizedBox(
            height: 10.0,
          ),
          new Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              productInfoModel.shopLogo != "null"
                  ? new Container(
                      child: new Image.network(productInfoModel.shopLogo),
                      width: 80.0,
                      height: 80.0,
                      decoration: BoxDecoration(
                          color: Color.fromRGBO(247, 247, 247, 1),
                          borderRadius: BorderRadius.circular(10.0)),
                    )
                  : new SizedBox(),
              new SizedBox(
                width: 10.0,
              ),
              new Expanded(
                flex: 1,
                child: new Row(
                  children: <Widget>[
                    new Image.asset(
                      ShopType.getIcon(productInfoModel.type),
                      width: 20.0,
                    ),
                    new SizedBox(
                      width: 5.0,
                    ),
                    new Text(
                      productInfoModel.shopName,
                      style: TextStyle(fontSize: 16.0),
                    ),
                  ],
                ),
              )
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Flex(
            direction: Axis.horizontal,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Text(
                      "宝贝描述",
                      style: TextStyle(
                          fontSize: 12.0,
                          color: Color.fromRGBO(153, 153, 153, 1)),
                    ),
                    new SizedBox(
                      width: 3.0,
                    ),
                    new ClipOval(
                      child: new Container(
                        alignment: Alignment.center,
                        width: 20.0,
                        height: 20.0,
                        color: Colors.amber,
                        child: new Text(
                          productInfoModel.score3,
                          style: TextStyle(fontSize: 8.0),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Text(
                      "卖家服务",
                      style: TextStyle(
                          fontSize: 12.0,
                          color: Color.fromRGBO(153, 153, 153, 1)),
                    ),
                    new SizedBox(
                      width: 3.0,
                    ),
                    new ClipOval(
                      child: new Container(
                        alignment: Alignment.center,
                        width: 18.0,
                        height: 18.0,
                        color: Colors.amber,
                        child: new Text(
                          productInfoModel.score2,
                          style: TextStyle(
                            fontSize: 8.0,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new Text(
                      "物流服务",
                      style: TextStyle(
                          fontSize: 12.0,
                          color: Color.fromRGBO(153, 153, 153, 1)),
                    ),
                    new SizedBox(
                      width: 3.0,
                    ),
                    new ClipOval(
                      child: new Container(
                        alignment: Alignment.center,
                        width: 20.0,
                        height: 20.0,
                        color: Colors.amber,
                        child: new Text(
                          productInfoModel.score1,
                          style: TextStyle(fontSize: 8.0),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
        ],
      ),
    );
  }

//相关推荐
  Widget _recommend() {
    return new Container(
      padding: EdgeInsets.all(10.0),
      child: new Column(
        children: <Widget>[
          new Container(
            child: Text(
              "  相关推荐",
              style: TextStyle(fontSize: 20.0),
            ),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
                border: Border(
              left: BorderSide(width: 5, color: Color.fromRGBO(249, 190, 0, 1)),
            )

                ///边框颜色、宽
                ),
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Container(
            height: 190.0,
            child: new ListView(
              scrollDirection: Axis.horizontal,
              children: relatedProduct.map((element) {
                return new GoodsHorizontalMore(element);
              }).toList(),
            ),
          )
        ],
      ),
    );
  }

//商品详情
  Widget _productInfo() {
    List<String> productDetail = [];

    if (productInfoModel.productDetail != null) {
      productDetail = productInfoModel.productDetail.cast<String>();
    }

    return new Container(
      padding: EdgeInsets.all(10.0),
      child: new Column(
        children: <Widget>[
          new Container(
            child: Text(
              "  商品详情",
              style: TextStyle(fontSize: 20.0),
            ),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
                border: Border(
              left: BorderSide(width: 5, color: Color.fromRGBO(249, 190, 0, 1)),
            )

                ///边框颜色、宽
                ),
          ),
          new SizedBox(
            height: 10.0,
          ),
          ...productDetail.map((element) {
            return new Image.network(element);
          }).toList()
        ],
      ),
    );
  }

  //底部购买

  bool isColl = false;

  _bottomBuy() {
    isColl = productInfoModel.isCollected != "null" ? true : false;
    print(isColl);
//是否收藏
    return new Container(
      alignment: Alignment.center,
      width: MediaQuery.of(context).size.width,
      child: new Flex(
        direction: Axis.horizontal,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: new Container(
              padding: EdgeInsets.only(top: 2),
              alignment: Alignment.center,
              child: new Column(
                children: <Widget>[
                  new Icon(
                    new IconData(
                      0xe764,
                      fontFamily: "aly",
                    ),
                    size: 25.0,
                  ),
                  new Text(
                    "分享",
                    style: TextStyle(fontSize: 12.0),
                  )
                ],
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: new Container(
              padding: EdgeInsets.only(top: 2),
              alignment: Alignment.center,
              child: new InkWell(
                splashColor: Colors.transparent, // 溅墨色（波纹色）
                highlightColor: Colors.transparent, // 点击时的背景色（高亮色
                child: new Column(
                  children: <Widget>[
                    new Stack(
                      children: <Widget>[
                        new Icon(
                          new IconData(
                            0xe79d,
                            fontFamily: "aly",
                          ),
                          size: 25.0,
                        ),
                        isColl
                            ? new Positioned(
                                right: 0,
                                top: 0,
                                child: new Container(
                                  alignment: Alignment.center,
                                  width: 15.0,
                                  height: 15.0,
                                  child: new CircleAvatar(
                                    backgroundColor: Colors.deepOrangeAccent,
                                    child: new Text(
                                      "1",
                                      style: TextStyle(fontSize: 11.0),
                                    ),
                                  ),
                                ))
                            : new SizedBox()
                      ],
                    ),
                    new Text(
                      "我的收藏",
                      style: TextStyle(fontSize: 12.0),
                    )
                  ],
                ),
                onTap: () {},
              ),
            ),
          ),
          Expanded(
            flex: 4,
            child: new Container(
              margin: EdgeInsets.only(left: 10.0),
              child: new Flex(
                direction: Axis.horizontal,
                children: <Widget>[
                  new InkWell(
                    child: new Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [
                              Color.fromRGBO(251, 190, 2, 1),
                              Color.fromRGBO(251, 139, 14, 1)
                            ],
                            begin: FractionalOffset(0, 1),
                            end: FractionalOffset(1, 1)),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20.0),
                            bottomLeft: Radius.circular(20.0)),
                      ),
                      width: 80.0,
                      height: 45.0,
                      child: new Text(
                        "分享",
                        style: TextStyle(
                          color: Color.fromRGBO(246, 250, 204, 1),
                          fontSize: 16.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    onTap: () {
                      setState(() {
                        this.isColl = !this.isColl;
                      });
                    },
                  ),
                  new Expanded(
                    flex: 1,
                    child: new Container(
                      height: 45.0,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [
                              Color.fromRGBO(253, 106, 37, 1),
                              Color.fromRGBO(252, 67, 47, 1)
                            ],
                            begin: FractionalOffset(0, 1),
                            end: FractionalOffset(1, 1)),
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(20.0),
                            topRight: Radius.circular(20.0)),
                      ),
                      child: new Text(
                        "立即购买￥" +
                            double.parse(productInfoModel.finalPrice)
                                .toStringAsFixed(2),
                        style: TextStyle(
                          color: Color.fromRGBO(246, 250, 204, 1),
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
      height: 70.0,
      padding: EdgeInsets.all(10.0),
      decoration: BoxDecoration(color: Colors.white, boxShadow: [
        BoxShadow(
          color: Colors.black54,
          offset: Offset(0, 2),
          blurRadius: 5,
        ),
      ]),
    );
  }
}
